<template>
  <info-page-container class="data-admin-info-root" @goListPage="cancel">
    <div class="info-data-container full-container flex-column">
      <!--详情头部容器-->
      <div class="insurance-specifics-head-pot">
        <!--title容器-->
        <div class="insurance-title-box">
          <!--title-->
          <span>{{dataItem.typeName}}</span>
          <!--该险种状态-->
          <h6>{{dataItem.available==1 ? "有效" : "无效" }}</h6>
        </div>

      </div>
      <div class="info-base-data">
        <el-form :model="dataItem" ref="baseForm" size="small"
                 label-width="68px">
          <el-form-item label="险种编号" prop="projectName">
            <el-input
              v-model="dataItem.typeNo"
              placeholder="请输入险种编号"
              clearable
            >
            </el-input>
          </el-form-item>
          <el-form-item label="险种名称" prop="projectName">
            <el-input
              v-model="dataItem.typeName"
              placeholder="请输入险种名称"
              clearable
            >
            </el-input>
          </el-form-item>

          <el-form-item label="是否有效" prop="projectName">
<!--            <el-input-->
<!--              v-model="dataItem.address"-->
<!--              placeholder="请输入是否有效"-->
<!--              clearable-->
<!--            >-->
<!--            </el-input>-->
            <el-select v-model="dataItem.available" placeholder="请输入是否有效">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="赔付率" prop="projectName">
            <el-input
              v-model="dataItem.compensateRatio"
              placeholder="请输入赔付率"
              clearable
            >
            </el-input>
          </el-form-item>
          <el-form-item label="险种描述" prop="projectName">
            <el-input
              type="textarea"
              v-model="dataItem.typeDesc"
              placeholder="请输入险种描述"
              clearable
            >
            </el-input>
          </el-form-item>

        </el-form>
        <!--按钮容器-->
        <div class="button-box flex-row">
          <el-button class="diy-bt" icon="el-icon-refresh" size="mini" @click="save">保存</el-button>
          <el-button class="diy-bt" icon="el-icon-refresh" size="mini" @click="cancel">取消</el-button>
        </div>
      </div>


    </div>
  </info-page-container>
</template>

<script>
import {infoPageMixins} from "@/views/business/mixins/infoPageMixins";
import {getFarmerInfo} from "@/api/business/userManagement";
/**
 * 引入api中的方法
 */
import {addDataAdminList, getDataAdminListById ,modifyDataAdminList} from "@/api/business/dataAdministration";

export default {
  mixins: [infoPageMixins],
  data() {
    return {
      // 创建一个数组用于是否有效下拉列表使用
      options:[
        {
          value: '1',
          label: '有效'
        },
        {
          value: '0',
          label: '无效'
        }
      ]


    }
  },
  methods: {
    //  设置当前数据
    setCurrentItem(currentItem) {
      this.startLoading()
      if (currentItem != null && currentItem?.id != null && currentItem?.id !== '') {
        //this.dataItem = _.cloneDeep(this.currentItem)
        let own = this;
        //调用getDataAdminListById方法查询当前险种的详情信息
        console.log(currentItem.id);

        getDataAdminListById({id:currentItem.id}).then(
          res=>{
            //将查询结果res.rows赋值给dataItem
            own.dataItem=res.data;
          }
        ).finally(() => {
          this.endLoading();
        })

      } else {
        this.dataItem = {
          typeNo:'',
          typeName:'',
          available:'',
          compensateRatio:'',
          typeDesc:''
        }
        this.endLoading()
      }
    },
    save() {
      let {dataItem} = this
      //通过判断dataItem中是否存在id属性来判断用户是在进行新增操作还是修改操作
      if (dataItem.id != null && dataItem.id !== '') {
        //调用modifyDataAdminList()方法进行保存修改操作
        modifyDataAdminList(this.dataItem).then(res=>{
          alert("保存操作执行完毕");
        })
      } else {
        //调用addDataAdminList()方法进行保存新增条目操作
        addDataAdminList(this.dataItem).then(res=>{
          alert("保存操作执行完毕");
        })
      }
      this.saveFinish()
    }
  },
};
</script>

<style scoped lang="scss">
@import "@/assets/styles/business.scss";
@import "@/assets/styles/businessTheme.scss";

.data-admin-info-root {
  ::v-deep .info-page-header {
    height: 3% !important;
  }
}

//设置详情头部容器样式
.insurance-specifics-head-pot {
  //设置宽高
  width: 100%;
  height: 50px;
  //设置下边框
  border-bottom: 1px rgba(220, 223, 230, 1) solid;
  //设置与表格的间距
  margin-bottom: 20px;
  //设置内部元素位置
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  //设置左侧title容器样式
  .insurance-title-box {
    //设置宽高
    width: 60%;
    //设置内部元素位置
    display: flex;
    align-items: center;
    //设置title样式
    span {
      font-size: 18px;
      letter-spacing: 1px;
    }

    //设置险种状态样式
    h6 {
      padding: 1px;
      //设置与左边文字间距
      margin-left: 5px;
      //设置边框
      border: 1px $form-txt-blue solid;
      //设置圆角
      border-radius: 2px;
      //设置字体样式
      color: $form-txt-blue;
      font-size: 6px;
    }
  }


}

//设置按钮样式
.button-box{
  margin-top:30px;
  width: 100%;
  justify-content: flex-start ;
  height: max-content ;
}

</style>
